<template>
    <div>
        <!-- 订单查询列表 -->
        <el-card class="box-card">
            <div slot="header">
                <el-form size="mini" class="demo-form-inline">
                    <el-row>
                        <el-col :span="5" :offset="1">
                            <el-form-item>
                                <el-input size="small" v-model="name" placeholder="请输入需要查询的姓名"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                         <el-date-picker
            v-model="dateRange"
            type="daterange"
            size="small"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
              </el-col>
                        <el-col :span="1">
                            <el-form-item>
                                <el-button type="primary" @click="getOrderlist">查询</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <el-table :data="tableData" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }">

                <el-table-column fixed prop="Did" label="订单编号" sortable>
                </el-table-column>

                <el-table-column fixed prop="userName" label="下单人">
                </el-table-column>


                <el-table-column fixed prop="Images" label="商品图片">
                    <template #default="{ row }">
                        <el-avatar :src="image + row.Images"></el-avatar>
                    </template>
                </el-table-column>

                <el-table-column fixed prop="Goodsname" label="下单商品">
                </el-table-column>


                <el-table-column fixed prop="CreateDate" label="创建时间" sortable>
                </el-table-column>

                <el-table-column fixed prop="OrderStatus" label="订单状态">
                    <template #default="{ row }">
                        <el-tag type="danger" v-if="row.OrderStatus == '待制作'">{{ row.OrderStatus }}</el-tag>
                        <el-tag type="warning" v-if="row.OrderStatus == '制作中'">{{ row.OrderStatus }}</el-tag>
                        <el-tag type="success" v-if="row.OrderStatus == '已完成'">{{ row.OrderStatus }}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column fixed prop="TotalAmount" label="订单总金额" sortable>
                </el-table-column>

                <el-table-column fixed prop="OrderNumber" label="数量" sortable>
                </el-table-column>

                <el-table-column fixed prop="Notes" label="备注">
                </el-table-column>


                <el-table-column label="操作" fixed="right">
                    <template #default="{ row }">
                        <el-button type="text" @click="editOrder(row)" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange"
                :hide-on-single-page="autoHide" :page-sizes="[5, 10, 20, , 50, 100]"
                layout="total, sizes, prev, pager, next, jumper" :total="totalNum" background>
            </el-pagination>
        </el-card>
        <el-dialog title="编辑订单" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
                    <orders v-model="dialogVisible" :data="Editdata" @refresh="getOrderlist"></orders>
        </el-dialog>
    </div>
</template>
<script>
import orders from './EditOrdersView.vue'
import bases from '../../plugins/base.js'
export default {
    methods: {
        //查询订单列表  模糊查询
        getOrderlist() {
            let start ='';
            let end = '';
            console.log(this.dateRange);
            if(this.dateRange!=null){
                 start = this.dateRange[0];
                 end = this.dateRange[1];
            }
            this.axios({
                method: 'get',
                url: 'Orders',
                params: {
                    page: this.page,
                    size: this.size,
                    name: this.name,
                    StartTime: start || null,
                    EndTime: end || null
                }
            }).then(res => {
                console.log(res);
                this.tableData = res.data.data;
                this.totalNum = res.data.count;
            }).catch(err => {
                console.log('err: ', err);
                this.$message.error("查询订单信息失败!!!");
            })
        },
        // 格式化日期的函数
        formatDate(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');

            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        } //分页
        , handleCurrentChange(val) {
            this.page = val;
            this.getOrderlist();
        }
        //切换每页数量
        , handleSizeChange(val) {
            this.size = val;
            this.getOrderlist();
        },
        //编辑订单
        editOrder(row) {
            console.log(row);
            this.dialogVisible = true;
            this.Editdata = row;
        },
        //弹窗关闭
        handleClose() {
            this.dialogVisible = false;
        }
    },
    data() {
        return {
            dateRange:[],
            Editdata: {},
            dialogVisible: false,
            image: '',
            autoHide: false,  //当只有一页数据时是否隐藏分页
            totalNum: 0,   //总数量
            page: 1,
            size: 5,
            name: "",
            StartTime: "",
            EndTime: "",
            tableData: [

            ]
        }
    },
    created() {
        //调用查询列表
        this.getOrderlist();
        console.log(bases.imgUrl);
        this.image = bases.imgUrl;
    },
    components: {
        //注册弹窗组件
        orders
    }
}
</script>